<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="Keywords" content="">
    <meta name="description" content="">
    <title>  </title>
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
    <link href="http://www.builive.com/apps/default/assets/css/main.css" rel="stylesheet" type="text/css" />
    <link href="css/global.css" rel="stylesheet">
</head>
<body>
    <div class="ws-qrfh">
        <span class="ws-qrfh-tit">订单号：</span>
        <input id="orderid" type="text" name="" value="">
        <button id="search" type="button" class="button">搜索</button>
        <span class="ws-qrfh-tit" style="margin-left: 20px;">配送员：</span>
        <input type="text" readonly name="" value="">
        <table class="ws-table" border=1 style="margin-top:30px;">
            <thead>
                <tr>
                    <th>
                        订单号
                    </th>
                    <th>
                        送货地址
                    </th>
                    <th>
                        金额
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
            </thead>
            <tbody data-role="tbody">
                <tr>
                    <td>
                        06060215
                    </td>
                    <td>
                        汕头市
                    </td>
                    <td>
                        100
                    </td>
                    <td>
                        <span class="ico-del"></span>
                    </td>
                </tr>
            </tbody>
        </table>
        <button  type="button" class="button" style="display:block;margin: 30px auto;">确认发货</button>
    </div>


    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/bui-min.js"></script>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/config-min.js"></script>
    <script type="text/javascript">
        $(function() {
            $(document).on('click', '.ico-del', function() {
                $(this).closest('tr').remove();
            })

            $(document).on('click', '#search', function() {
                var input = $('#orderid').val();
                if(input == '') {
                    alert('订单号不能为空！')
                } else {
                    var tpl = '<tr>\
                                    <td>'+input+'</td>\
                                    <td>\
                                        汕头市\
                                    </td>\
                                    <td>\
                                        10\
                                    </td>\
                                    <td>\
                                        <span class="ico-del"></span>\
                                    </td>\
                                </tr>';

                    $('[data-role="tbody"]').append(tpl);
                    $('#orderid').val('');
                }
            })
        })
    </script>
</body>

</html>
